<script setup lang="ts">
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import type { AsideMenuRef } from '~/components/ref-export'

const locale = ref(zhCn)
const selected = ref('')
const isExpand = ref(true)

const asideMenuRef = ref<AsideMenuRef | null>(null)

function onMenuChange(value: string) {
  selected.value = value
}

function onMenuExpand(value: boolean) {
  isExpand.value = value
}

function onButtonClick() {
  const menu = asideMenuRef.value
  if (menu) {
    if (isExpand.value) {
      menu.close()
    } else {
      menu.open()
    }
  }
}
</script>

<template>
  <ElConfigProvider :locale="locale">
    <ElContainer>
      <ElHeader>
        <PageHeader title="Lyfd Interview" />
      </ElHeader>
      <ElContainer>
        <ElAside width="240px">
          <AsideMenu
            ref="asideMenuRef"
            @change="onMenuChange"
            @expand="onMenuExpand"
          />
        </ElAside>
        <ElMain>
          <ElScrollbar>
            <HelloWorld
              :current="selected"
              :isExpand="isExpand"
              @click="onButtonClick"
            />
          </ElScrollbar>
        </ElMain>
      </ElContainer>
    </ElContainer>
  </ElConfigProvider>
</template>
